<template>
    <d-layout>
        <d-header class="dheader">
            <d-menu mode="horizontal" :default-select-keys="['home']" style="margin-bottom: 20px"
                    @select="selectMenu"
                    :width="width + 'px'">
                <d-menu-item key="home" @click="changeView('job-view')">
                    <template #icon>
                        <i class="icon-homepage"></i>
                    </template>
                    首页
                </d-menu-item>
                <d-sub-menu title="数据分析" key="course">
                    <d-menu-item key="city">城市分析</d-menu-item>
                    <d-menu-item key="tech">技术栈分析</d-menu-item>
                    <d-menu-item key="welfare">福利分析</d-menu-item>
                    <d-menu-item key="salary">薪资对比</d-menu-item>
                </d-sub-menu>
                <d-sub-menu title="模型" key="course">
                    <d-menu-item key="score-model">评分模型</d-menu-item>
                    <d-menu-item key="kmeans-model">聚类模型</d-menu-item>
                </d-sub-menu>
                <d-menu-item key="no" disabled>行业大数据（小组6）</d-menu-item>
            </d-menu>
        </d-header>
        <d-content class="dcontent">
            <router-view/>
        </d-content>
    </d-layout>
</template>

<script>
export default {
    name: "MyIndex",
    methods: {
        changeView(view) {
            this.$router.push(view)
        },
        selectMenu(menuItem) {
            let key = menuItem.key;
            if (key === "city") {
                this.$router.push({
                    path: 'pie-chart',
                    query: {
                        type: key,
                        title: '城市岗位占比'
                    }
                })
            } else if (key === "tech") {
                this.$router.push({
                    path: 'word-chart',
                    query: {
                        type: key,
                        title: '技术栈',
                        t: (new Date())
                    }
                })
            } else if (key === "welfare") {
                this.$router.push({
                    path: 'word-chart',
                    query: {
                        type: key,
                        title: '福利',
                        t: (new Date())
                    }
                })
            } else {
                this.$router.push(key)
            }
        }
    }
}
</script>

<style>
.dheader {
    background: #333854;
    text-align: center;
}

.dcontent {
    text-align: center;
}
</style>